import React from 'react'
import type { FC } from 'react'

interface ListCardProps {
  id: string
  title: string
  category: string
  description: string
  coverImage: string
  itemCount: number
}

const ListCard: FC<ListCardProps> = ({ 
  title, 
  category, 
  description, 
  coverImage, 
  itemCount 
}) => {
  // 生成不同分类的颜色标签
  const getCategoryColor = (cat: string): string => {
    switch (cat.toLowerCase()) {
      case '平价好物':
        return 'bg-green-100 text-green-800'
      case '影视/书籍':
        return 'bg-blue-100 text-blue-800'
      case '运动/减肥':
        return 'bg-red-100 text-red-800'
      default:
        return 'bg-gray-100 text-gray-800'
    }
  }

  return (
    <div className="list-card bg-white rounded-xl shadow-md overflow-hidden hover-lift cursor-pointer transition-all duration-500">
      <div className="relative h-48 overflow-hidden">
        <img 
          src={coverImage} 
          alt={title} 
          className="w-full h-full object-cover transition-transform duration-700 hover:scale-110"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
        <div className="absolute top-4 left-4 transform transition-transform duration-300">
          <span className={`${getCategoryColor(category)} text-xs font-medium px-3 py-1 rounded-full shadow-sm`}>
            {category}
          </span>
        </div>
        <div className="absolute bottom-4 left-4 transform translate-y-4 opacity-0 hover:translate-y-0 hover:opacity-100 transition-all duration-300 text-white">
          <span className="bg-primary/90 px-3 py-1 rounded-full text-sm font-medium">
            {itemCount} 个精选推荐
          </span>
        </div>
      </div>
      <div className="p-5 transform transition-all duration-300">
        <h3 className="text-xl font-bold mb-2 line-clamp-2 transition-colors duration-300 hover:text-primary">{title}</h3>
        <p className="text-gray-600 mb-4 line-clamp-2 transition-opacity duration-300">{description}</p>
        <div className="flex justify-between items-center">
          <span className="text-gray-500 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">{itemCount} 个推荐项</span>
          <button className="text-primary font-medium hover:underline transition-transform duration-300 hover:translate-x-1">
            查看详情 
            <span className="inline-block transition-transform duration-300 hover:translate-x-1">›</span>
          </button>
        </div>
      </div>
    </div>
  )
}

export default ListCard